<template>
  <map
    id="contact-map"
    class="map"
    :style="mapStyle"
    :show-location="true"
    :latitude="latitude"
    :longitude="longitude"
    :scale="14"
    :markers="avatarList"
    @regionchange="handleMapRegionChange"
  >
    <cover-view slot="callout">
      <cover-view 
        v-for="(item, index) in avatarList"
        :key="index"
        :marker-id="item.id" class="avatar">
        <cover-image :src="item.avatar" class="avatar-image"></cover-image>
        <cover-view></cover-view>
      </cover-view>
    </cover-view>
  </map>
</template>

<script lang="ts" setup>
import { computed, CSSProperties, onMounted, ref } from 'vue'
import AvatarData from './avatar.json'

const mapStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}

  style.height = `calc(90vh)`

  return style
})

let latitude = ref<number>(22.961836)
let longitude = ref<number>(113.330067)

let contactMap: any = null


// 生成模拟数据
type AvatarMarker = {
  id: number,
  latitude: number,
  longitude: number,
  joinCluster?: boolean,
  avatar: string,
  iconPath: string,
  width: number,
  height: number,
  customCallout?: Object
}

// 显示头像列表Markers标记点
let avatarList = ref<AvatarMarker[]>([])

// 获取对应位置坐标范围内的用户信息
const getAvatarList = (minLat: number, maxLat: number, minLong: number, maxLong: number) => {
  avatarList.value = []
  for (let i = 0; i < 300; i++) {
    const latitudeValue: number = Number((Math.random() * (maxLat - minLat) + minLat).toFixed(6))
    const longitudeValue: number = Number((Math.random() * (maxLong - minLong) + minLong).toFixed(6))
    // const avatar: string = `${avatarBaseUrl}${Math.floor(Math.random() * 50) + 1}.png`
    const avatar: string = AvatarData[Math.floor(Math.random() * 1900) + 1].avatarUrl
    avatarList.value.push({
      id: i,
      latitude: latitudeValue,
      longitude: longitudeValue,
      joinCluster: true,
      iconPath: avatar,
      avatar: avatar,
      width: 2,
      height: 2,
      customCallout: {
        display: 'ALWAYS',
        anchorY: 5
      }
    })
  }
  // console.log(avatarList.value);
  contactMap.addMarkers({
    markers: avatarList.value,
    clear: true,
    success: (res: any) => {
      console.log(res);
    }
  })
}

// 加载完毕获取地图对象
onMounted(() => {
  contactMap = uni.createMapContext('contact-map')
  // contactMap.addMarkers({
  //   markers: [],
  //   clear: true,
  //   success: (res: any) => {
  //     console.log(res);
  //   }
  // })
  // avatarList.value.push({
  //     id: 1,
  //     latitude: latitude.value,
  //     longitude: longitude.value,
  //     iconPath: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJZPdAzRMUVtmw7vtdYIwTq4iawxCzKSWEfdUT3Zr22pQjguW5uO2YqAjrudsb4znNQD5ibjB8ia4NDA/132',
  //     avatar: '',
  //     width: 20,
  //     height: 20,
  //     customCallout: {
  //       display: 'ALWAYS',
  //       anchorY: 5
  //     }
  //   })
  contactMap.initMarkerCluster({
    enableDefaultStyle: true,
    zoomOnClick: true,
    gridSize: 80
  })
  // generateAvatarData()
  getAvatarList(22.93217033685176, 22.99196857147843, 113.31336760146678, 113.34682630181214)
})

// 处理地图视野发生变化
const handleMapRegionChange = (e: any) => {
  if (e.type === 'end') {
    contactMap.getRegion({
      success: (re: any) => {
        // console.log(re);
        const minLatitude: number = re.southwest.latitude
        const maxLatitude: number = re.northeast.latitude
        const minLongitude: number = re.southwest.longitude
        const maxLongitude: number = re.northeast.longitude
        console.log(minLatitude, minLongitude, maxLatitude, maxLongitude);
        // getAvatarList(minLatitude, maxLatitude, minLongitude, maxLongitude)
      }
    })
  }
  
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
}
.avatar {
  width: 35px;
  height: 35px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #E83A30;
}
.avatar-image {
  width: 100%;
  height: 100%;
}
</style>
